<template>
	<div>
		<van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />
		<h3>注册账号</h3>
		<van-form @submit="onSubmit" style="margin-top: 30px;">
			<van-field v-model="phone" label="手机号" placeholder="手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
			<van-field v-model="username" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="passwordOK" type="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
			<van-field v-model="password" type="password" label="确认密码" placeholder="确认密码" :rules="[{ required: true, message: '请填写确认密码' }]" />
			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">提交</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
	import {
		Notify
	} from 'vant';
	import {
		Dialog
	} from 'vant';
	
	export default {
		data() {
			return {
				phone: '',
				username: '',
				passwordOK: '',
				password: '',
			};
		},
		methods: {
			onClickLeft() {
				console.log("返回")
				this.$router.back()
			},
			onSubmit() {
				if (this.passwordOK != this.password) {
					Notify({
						type: 'danger',
						message: '密码错误，请重新输入'
					})
					return;
				}

				console.log('注册 ' + this.username + ' ' + this.password);
				this.$axios({
					method: 'post',
					url: '/logreg/register',
					data: this.$qs.stringify({
						phone: this.phone,
						username: this.username,
						password: this.password
					})
				}).then((resp) => {
					if (resp.data.msg == "注册用户成功") {
						Dialog.alert({
							message: '注册用户成功',
						})
						this.$router.replace('/login')
					}else{
						Dialog.alert({
							message: '注册用户失败，请稍候再试',
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
</style>
